<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
			}
			.con {
				position: absolute;
				top: 20%;
				left: 35%;
				background-color: #000;
				width: 650px;
				height: 500px;
			}
			.box {
				width: 650px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
				background-repeat: no-repeat;
				background-size: cover;
				transition: all 1s linear;
			}
			.one {
				background-image: url('https://img2.baidu.com/it/u=449045644,765198556&fm=26&fmt=auto&gp=0.jpg');
				-webkit-clip-path: polygon(0 0, 43% 0, 28% 100%, 0 100%);
				clip-path: polygon(0 0, 43% 0, 32% 100%, 0 100%);
				background-position-x: -222px;
			}
			.two {
				background-image: url('https://img1.baidu.com/it/u=1691559909,860202343&fm=26&fmt=auto&gp=0.jpg');
				-webkit-clip-path: polygon(45% 0, 71% 0, 75% 100%, 33% 100%);
				clip-path: polygon(43% 0, 71% 0, 75% 100%, 32% 100%);
				background-position-y: -197px;
			}
			.three {
				background-image: url('https://img1.baidu.com/it/u=1150302317,1187373128&fm=15&fmt=auto&gp=0.jpg');
				-webkit-clip-path: polygon(72% 0, 100% 0, 100% 100%, 79% 100%);
				clip-path: polygon(71% 0, 100% 0, 100% 100%, 75% 100%);
				background-position-x: -73px;
			}
			.box:hover {
				clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
				z-index: 5;
			}
		</style>
	</head>
	<body>
		<div class="con">
			<div class="box one"></div>
			<div class="box two"></div>
			<div class="box three"></div>
		</div>
	</body>
</html>
